import { RbacMenuType } from '@/data/auth/menu';
import { CorrelationTypeEnum } from '@/enums/auth';
import AddPermModal from '@/pages/auth/rbacMenu/components/AddPermModal';
import AddButtonForm from '@/pages/auth/rbacMenu/components/button/AddButtonModal';
import UpdateButtonForm from '@/pages/auth/rbacMenu/components/button/UpdateButtonModal';
import { list } from '@/services/data';
import { handleAdd, handleRemove, handleUpdate } from '@/services/handle';
import { PlusOutlined } from '@ant-design/icons';
import { Tag } from 'antd';
import React, { useEffect, useState } from 'react';

export type UpdateFormProps = {
  values: Partial<RbacMenuType>;
};

const Index: React.FC<UpdateFormProps> = (props) => {
  const [tags, setTags] = useState<any>([]);

  const [selected, setSelected] = useState<any>();
  const [selectedTag, setSelectedTag] = useState<any>();

  const [addPermModalVisible, handleAddPermModalVisible] = useState<boolean>(false);

  const [addButtonModalVisible, handleAddButtonModalVisible] = useState<boolean>(false);
  const [updateButtonModalVisible, handleUpdateButtonModalVisible] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async () => {
      const menuId = props.values.id;
      const hasBtnList = await list('/system/rbacMenuBtn', { menuId });
      if (hasBtnList && hasBtnList.list) {
        setTags(hasBtnList?.list?.map(({ id, name, btnPerm }) => ({ id, name, btnPerm })) || []);
      } else {
        setTags([]);
        setSelected('');
      }
    };
    if (props.values.id) fetchData();
  }, [props.values]);

  const getColor = (id: any) => {
    if (id === selected) {
      return '#f50';
    }
    return '#2db7f5';
  };

  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      {tags.map(({ id, name }: any, index: any) => (
        <Tag
          key={index}
          closable
          color={getColor(id)}
          onClose={async () => {
            await handleRemove('/system/rbacMenuBtn', id);
          }}
          style={{
            border: '1px solid #d9d9d9',
            padding: '2px 8px',
            borderRadius: '8px',
          }}
          onClick={() => {
            setSelected(id);
            setSelectedTag(tags[index]);
          }}
        >
          {name}
        </Tag>
      ))}
      <Tag
        style={{
          border: '1px solid #d9d9d9',
          padding: '2px 8px',
          borderRadius: '8px',
        }}
        onClick={() => handleAddButtonModalVisible(true)}
      >
        <PlusOutlined /> 新增
      </Tag>
      {selected && (
        <>
          <Tag
            style={{
              border: '1px solid #d9d9d9',
              padding: '2px 8px',
              borderRadius: '8px',
            }}
            onClick={() => handleUpdateButtonModalVisible(true)}
          >
            <PlusOutlined /> 修改
          </Tag>
          <Tag
            style={{
              border: '1px solid #d9d9d9',
              padding: '2px 8px',
              borderRadius: '8px',
            }}
            onClick={() => handleAddPermModalVisible(true)}
          >
            <PlusOutlined /> 授权
          </Tag>
        </>
      )}

      <AddPermModal
        onSubmit={async (value) => {
          const permissionIds = value?.targetKeys;
          const menuOrBtnId = selected;
          await handleAdd('/system/rbacPermissionMenuBtn', {
            permissionIds,
            menuOrBtnId,
            correlationType: 2,
          });
        }}
        onCancel={() => {
          handleAddPermModalVisible(false);
        }}
        updateModalVisible={addPermModalVisible}
        values={{ id: selected }}
        correlationType={CorrelationTypeEnum.BUTTON}
      />
      <AddButtonForm
        onSubmit={async (value) => {
          const success = await handleAdd('/system/rbacMenuBtn', value);
          if (success) {
            handleAddButtonModalVisible(false);
          }
        }}
        onCancel={() => handleAddButtonModalVisible(false)}
        visible={addButtonModalVisible}
        values={{ id: selected, menuId: props.values.id }}
      />
      <UpdateButtonForm
        onSubmit={async (values: any) => {
          const success = await handleUpdate('/system/rbacMenuBtn', values, { id: selected });
          if (success) {
          }
        }}
        onCancel={() => {
          handleUpdateButtonModalVisible(false);
        }}
        updateModalVisible={updateButtonModalVisible}
        values={{
          id: selected,
          menuId: props.values.id,
          btnPerm: selectedTag?.btnPerm,
          name: selectedTag?.name,
        }}
      />
    </div>
  );
};

export default Index;
